<template>
  <div id="header">
    <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      :router="true"
      class="menu"
    >
      <el-menu-item index="/dashboard">ダッシュボード</el-menu-item>
      <el-menu-item index="/billing_list">請求一覧</el-menu-item>
      <el-menu-item index="/contract_start">契約開始</el-menu-item>
      <el-menu-item index="/contract_list">契約一覧 <el-badge :value="contract_list_num" v-if="contract_list_num !== 0"></el-badge></el-menu-item>
      <el-menu-item index="/manage_dest">送信先管理</el-menu-item>
      <el-menu-item index="/setting">設定</el-menu-item>
      <el-menu-item index="/logout">ログアウト</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      activeIndex: this.$route.path,
      contract_num: 0
    }
  },
  created () {
    this.contract_list_num = 999
  }
}
</script>
<style>
  @import '../../static/css/header.css';
</style>
